<template>
    <view class="page">
        <comHead :datas="datasObj"> <template #headerContent> </template> </comHead>
        <view class="content_box" v-if="parentInfo.type == 'tag'">
            <view class="title_box flex-bwt">
                <text class="ft-32 c-33 fw-800">已选标签（{{ selectChildId.length }}/6）</text>
                <view class="rig ft-24 c-33 flex bd-r20" @click="open()">
                    查看
                    <image class="icon_samll ml-4 mt-2" src="https://cdn.oss.bon-top.cn/static_bc/images/icon_left.png"
                        mode="aspectFit">
                    </image>
                </view>
            </view>
            <view class="selectMenu_box flex">
                <view class="selectMenu_box_list">
                    <view class="item" :class="selectId == item.id ? 'active' : ''" v-for="item in optionsList"
                        :key="item.id" @click="selectBtn(item)">
                        {{
                            item.name }}</view>
                </view>
                <view class="selectMenu_box_content flex">
                    <view class="model flex">
                        <view class="items" v-for="item in childrenList" :key="item.id"
                            :class="selectChildId.includes(item.id) ? 'active' : ''" @click="selectChild(item)">{{
                                item.name
                            }}</view>
                    </view>
                </view>
            </view>
            <view :style="{ height: (98 + 68) + 'rpx' }"></view>
            <view class="btn_box">
                <view class="box" style="height: 98rpx;">
                    <view class="btn add" @click="open()">提交</view>
                </view>

            </view>
        </view>
        <view class="content_box2" v-else>
            <!-- immigrate_list -->
            <view class="ft-24 c-33 fw-800 mt-30 ml-20"> 移民项目（{{ optionsInfo.immigrate_list?.length }}）</view>
            <view class="tags_box ml-20">
                <view class="item" :class="selectChildId.includes(item.id) ? 'active' : ''"
                    v-for="item in optionsInfo.immigrate_list" :key="item.id" @click="selectChild(item)">
                    {{ item.name }}</view>
            </view>
            <!-- education_list -->
            <view class="ft-24 c-33 fw-800 mt-10 ml-20"> 教育项目（{{ optionsInfo.education_list?.length }}）</view>
            <view class="tags_box ml-20">
                <view class="item" :class="selectChildId.includes(item.id) ? 'active' : ''"
                    v-for="item in optionsInfo.education_list" :key="item.id" @click="selectChild(item)">
                    {{ item.name }}</view>
            </view>
            <view :style="{ height: (98 + 68) + 'rpx' }"></view>
            <view class="btn_box">
                <view class="box" style="height: 98rpx;">
                    <view class="btn add" @click="submit()">提交</view>
                </view>

            </view>
        </view>
    </view>
    <up-popup :show="show" mode="bottom" :round="20" closeable="true" @close="show = !show" @open="open">
        <view class="popup_box">
            <view class="header_pop flex">已选择标签（{{ selectChildItem.length }}/6）</view>
            <view class="popup_content">
                <view class="items flex-center" v-for="item in selectChildItem" :key="item">
                    {{ item.name }}
                    <image class="icon_samll ml-4" src="https://cdn.oss.bon-top.cn/static_bc/images/close_icon.png"
                        mode="aspectFit" @click="deleteTag(item)">
                    </image>
                </view>
                <view :style="{ height: (98 + 68) + 'rpx' }"></view>
            </view>

            <view class="btn_box">
                <view class="pop_btn" @click="submit()">
                    提交
                </view>
            </view>

        </view>
    </up-popup>
</template>
<script setup lang="js">
import comHead from '@/components/comHead.vue';
import { onLoad } from '@dcloudio/uni-app';
import { ref, reactive, getCurrentInstance } from 'vue';
import { utils } from '@/utils/utils.js';
import { api } from '@/utils/api.js';
let datasObj = reactive({
    title: '标签编辑',
    img: '',
    color: '#FFFFFF',
    direction: '',
    scrollTop: 0,
    noBack: false,
    height: 88
})
const type = ref('')
const selectId = ref(0)
const selectChildId = ref([])
const selectChildItem = ref([])
const { proxy } = getCurrentInstance();
const show = ref(false)

const submit = () => {
    const eventChannel = proxy.getOpenerEventChannel();
    eventChannel.emit('getTags', { tags: [...selectChildItem.value], ids: [...selectChildId.value], type: parentInfo.value.type });
    uni.navigateBack(-1)
}
const open = () => {
    show.value = true
}

const selectDemo = (item) => {

}
const deleteTag = (item) => {
    selectChildItem.value = selectChildItem.value.filter(f => f.id !== item.id)
    getItem()

}
const selectChild = (item) => {
    // if (parentInfo.type == 'tag') {
    let _find = selectChildItem.value.find(f => f.id == item.id)
    if (_find) {
        selectChildItem.value = selectChildItem.value.filter(f => f.id != item.id)
    } else {
        if (selectChildItem.value.length < 6) selectChildItem.value.push(item)
    }
    getItem()
    // }

}
// 获取对应的标签
const getItem = () => {
    selectChildId.value = selectChildItem.value.reduce((a, b) => {
        a.push(b.id)
        return a
    }, [])
}
const selectBtn = (item) => {
    selectId.value = item.id
    childrenList.value = optionsList.value.find(f => f.id == selectId.value).children
}
const optionsList = ref([])
const childrenList = ref([])
const optionsInfo = ref([])
const getSaleEditOptions = () => {
    utils.request(api.getSaleEditOptions, {

    }, "get").then(res => {
        optionsList.value = res.data.info?.tag_list
        optionsInfo.value = res.data.info
        selectId.value = optionsList.value[0].id

        childrenList.value = optionsList.value.find(f => f.id == selectId.value).children

    })
}
const parentInfo = ref([])
onLoad((option) => {
    getSaleEditOptions()
    const eventChannel = proxy.getOpenerEventChannel();
    // 接受父页面的数据
    eventChannel.on('tagsData', (data) => {
        console.log('data', data)
        parentInfo.value = data
        selectChildItem.value = [...data.tags]
        // console.log(' selectChildItem.value', selectChildItem.value)
        datasObj.title = data.type == 'tag' ? '标签编辑' : '编辑擅长项目'
        getItem()
    });
})
</script>
<style lang="scss">
.content_box {
    .title_box {
        height: 104rpx;
        border-top: 2rpx solid #F1F1F1;
        border-bottom: 2rpx solid #F1F1F1;
        padding: 0 30rpx;

        .rig {
            padding: 12rpx 20rpx;
            background-color: #F8F8F8;
        }
    }

    .selectMenu_box {
        width: 100%;
        align-items: flex-start;

        &_list {
            width: 200rpx;
            border-right: 2rpx solid #F1F1F1;
            margin: 0;
            overflow: hidden;

            .item {
                width: 100%;
                text-align: center;
                font-size: 24rpx;
                color: #999;
                margin-top: 30rpx;

            }

            .active {
                font-size: 28rpx;
                color: #333;
                font-weight: 800;
            }
        }

        &_content {
            flex: 1;
            padding: 0 30rpx;
            margin: 0;
            overflow: hidden;

            .model {
                margin-top: 30rpx;
                flex-wrap: wrap;
                gap: 20rpx;

                .items {
                    padding: 12rpx 20rpx;
                    background-color: #F1F1F1;
                    // margin-right: 20rpx;
                    border-radius: 20rpx;
                    font-size: 24rpx;
                    color: #666;
                    margin-bottom: 20rpx;
                }

                .active {
                    color: #DBF046;
                    background-color: #333;
                }


            }
        }
    }
}


.btn_box {
    width: 100%;
    position: fixed;
    left: 0;
    bottom: 0;
    box-sizing: border-box;
    background-color: #F8F8F8;
    padding-bottom: calc(10rpx + env(safe-area-inset-bottom));

    .center {
        width: 100%;
        text-align: center;
    }

    .btn_left {
        width: 132rpx;
        height: 54rpx;
        background: #FFFFFF;
        border-radius: 20rpx 20rpx 20rpx 20rpx;
        line-height: 54rpx;
        text-align: center;
    }

    .btn {
        width: 192rpx;
        height: 78rpx;
        background: #F1F1F1;
        border-radius: 20rpx 20rpx 20rpx 20rpx;
        text-align: center;
        line-height: 78rpx;
        font-size: 28rpx;

    }

    .box {
        padding: 20rpx 30rpx 0;
        box-sizing: border-box;
        height: 98rpx;


        .add {
            width: 100%;
            color: #DBF046;
            background-color: #333333;
        }

    }
}

.popup_box {
    height: 800rpx;
    display: flex;
    flex-direction: column;

    .header_pop {
        height: 100rpx;
        padding: 0 30rpx;
        font-size: 32rpx;
        color: #333;
        font-weight: 800;
    }

    .popup_content {
        // height: calc(800rpx - 230rpx);
        flex: 1 1 auto;
        display: flex;
        flex-wrap: wrap;
        // 多行对齐使用 align-content
        align-content: flex-start;
        justify-content: flex-start;
        gap: 20rpx;
        padding: 20rpx 30rpx 0;
        border-top: 2rpx solid #F1F1F1;
        border-bottom: 2rpx solid #F1F1F1;


        .items {
            height: 58rpx;
            line-height: 58rpx;
            padding: 0 20rpx;
            background: #333333;
            border-radius: 20rpx;
            font-size: 24rpx;
            color: #DBF046;
            text-align: center;
        }
    }

    .pop_btn {
        width: 448rpx;
        height: 78rpx;
        line-height: 78rpx;
        background: #333333;
        border-radius: 20rpx 20rpx 20rpx 20rpx;
        color: #DBF046;
        text-align: center;
        margin: 20rpx auto 0;

    }

}

.content_box2 {
    border-top: 2rpx solid #F1F1F1;

    .tags_box {
        display: flex;
        justify-content: flex-start;
        gap: 20rpx;
        margin-top: 20rpx;

        .item {
            padding: 12rpx 20rpx;
            background-color: #F1F1F1;
            // margin-right: 20rpx;
            border-radius: 20rpx;
            font-size: 24rpx;
            color: #666;
            margin-bottom: 20rpx;
        }

        .active {
            color: #DBF046;
            background-color: #333;
        }
    }
}
</style>